<template>
    <div id="app">
      <div id="searchConditions">
        <el-row :gutter="20">
        	<el-col :span="6">
            	<el-input v-model="t.active_name" placeholder="考试名称"></el-input>
            </el-col>
        </el-row>
        <br>
        <el-row :gutter="20">
	        <el-col :span="6">
	          <el-select v-model="t.department_code" placeholder="请选择部门">
	            <el-option v-for="option in bmOptions" :key="option.value" :value="option.value" :label="option.label"></el-option>
	          </el-select>
	        </el-col>
	        <el-col :span="6">
	          <el-select v-model="t.gender" placeholder="请选择性别">
	            <el-option :key="3" value="" label="性别:全部"></el-option>
	            <el-option :key="0" :value="1" label="男"></el-option>
	            <el-option :key="1" :value="2" label="女"></el-option>
	          </el-select>
	        </el-col>
          <el-col :span="6">
	          <el-select v-model="t.teacher_type_code" placeholder="请选择教师类型">
	              <el-option :key="3" value="" label="教师类型:全部"></el-option>
	              <el-option :key="0" :value="1" label="校聘"></el-option>
	              <el-option :key="1" :value="2" label="院聘"></el-option>
                <el-option :key="2" :value="3" label="外校教师"></el-option>
	          </el-select>
	        </el-col>
	      </el-row>
	      <br>
        <el-row style="text-align: center;margin-top:20px;">
            <el-col :span="24" size="large">
              <el-button @click="search" type="primary" size="large ">查询</el-button>
            </el-col>
        </el-row>
      </div>
    <div style="padding: 20px;text-align: left">
      <el-button-group>
			  <el-button type="primary" @click="importData">导入培训考试成绩</el-button>
      </el-button-group>
    </div>
        <el-table :data="trainTestResult.item" v-loading="loading"
          style="width:100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection">
            </el-table-column>
            <el-table-column prop="ACTIVE_NAME" align="center" label="考试名称">
            </el-table-column>
            <el-table-column prop="CODE" align="center" label="工号/证件号">
            </el-table-column>
            <el-table-column prop="NAME" align="center" label="姓名">
            </el-table-column>
            <el-table-column prop="DEPARTMENT_NAME" align="center" label="部门">
            </el-table-column>
            <el-table-column prop="SCORE" align="center" label="分数">
            </el-table-column>
            <el-table-column prop="IS_PASS" align="center" label="是否通过">
              <template slot-scope="scope">
                <el-tag :type="scope.row.IS_PASS == 1 ? 'success' : scope.row.IS_PASS == 0 ? 'danger' : 'info' " close-transition>
                  {{scope.row.IS_PASS== 1 ? "通过": scope.row.IS_PASS == 0 ? "未通过": ""}}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="REMARK" align="center" label="备注">
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="trainTestResult.pageNumber"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="trainTestResult.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="trainTestResult.total">
        </el-pagination>
        <el-dialog title="培训成绩导入" :visible.sync="dialogImportVisible" :modal-append-to-body="false" :close-on-click-modal="false" class="dialog-import">
          <div>
            <form class="upload" method="post" enctype="multipart/form-data">
                <input type="file" @change="getFile($event)">
                <el-button type="primary" size="small" :disabled="processing" @click="submit($event)">{{uploadTip}}</el-button>
                <div slot="tip">上传培训考试成绩(只能上传.xls文件)</div>
                <div slot="tip">
                  <a href="./static/template/trainResultTemplate.xls">下载文件模版</a>
                </div>
            </form>
          </div>
        </el-dialog>
    </div>
</template>
<script>
import { getTrainResult } from '@/api/trainManagement'
import _ from 'lodash'
import { mapGetters } from 'vuex'
import axios from 'axios'
import { parseTime } from '@/utils'
export default {
  name: 'invigilatorArrangement',
  data() {
    return {
      trainTestResult: {
        total: 0,
        pageNumber: 1,
        pageSize: 20,
        item: []
      },
      file: '',
      loading: false,
      multipleSelection: [],
      multipleSelectionIds: '',
      dialogFormVisible: false,
      dialogImportVisible: false,
      uploadTip: '提交',
      uploadData: {
        filename: 'examinee.xls'
      },
      processing: false,
      currentPageNumber: 1,
      t: {
        active_name: '',
        department_code: '',
        gender: '',
        teacher_type_code: ''
      },
      bmOptions: [{ value: '', label: '部门:全部' }, { value: '101', label: '会计学院' },
        { value: '102', label: '金融学院' },
        { value: '104', label: '经济学院' },
        { value: '105', label: '法学院' },
        { value: '106', label: '公共经济与管理学院' },
        { value: '107', label: '人文学院' },
        { value: '108', label: '信息管理与工程学院' },
        { value: '109', label: '外国语学院' },
        { value: '110', label: '统计与管理学院' },
        { value: '111', label: '数学学院' },
        { value: '112', label: '体育教育部' },
        { value: '113', label: '继续教育学院' },
        { value: '115', label: '国际文化交流学院' },
        { value: '123', label: '国际教育学院' },
        { value: '125', label: '马克思主义学院' },
        { value: '126', label: '创业学院' },
        { value: '127', label: '商学院' },
        { value: '200', label: '校行政领导' },
        { value: '201', label: '两办' },
        { value: '204', label: '纪监处（纪委、监察处合署）' },
        { value: '206', label: '审计处' },
        { value: '207', label: '组织部' },
        { value: '208', label: '宣传部' },
        { value: '209', label: '统战部' },
        { value: '210', label: '党校' },
        { value: '211', label: '研究室' },
        { value: '212', label: '人事处' },
        { value: '213', label: '国际处' },
        { value: '214', label: '教务处' },
        { value: '215', label: '学生处' },
        { value: '216', label: '研究生院' },
        { value: '217', label: '科研处' },
        { value: '218', label: '发展规划处' },
        { value: '219', label: '信息化办公室' },
        { value: '220', label: '财务处' },
        { value: '222', label: '离退休处' },
        { value: '223', label: '后勤管理处' },
        { value: '224', label: '基本建设处' },
        { value: '225', label: '保卫处' },
        { value: '226', label: '工会' },
        { value: '227', label: '妇联' },
        { value: '228', label: '团委' },
        { value: '231', label: '现代服务产业园区办公室' },
        { value: '234', label: '资产管理处' },
        { value: '302', label: '高等研究院' },
        { value: '321', label: '公共政策与治理研究院' },
        { value: '341', label: '财经研究所' },
        { value: '353', label: '高等教育研究所' },
        { value: '358', label: '上海市金融信息技术研究重点实验室' },
        { value: '359', label: '中国公共财政研究院' },
        { value: '361', label: '上海发展研究院' },
        { value: '368', label: '三农研究院' },
        { value: '401', label: '档案馆' },
        { value: '402', label: '图书馆' },
        { value: '403', label: '教育技术中心' },
        { value: '404', label: '就业指导中心' },
        { value: '405', label: '出版社' },
        { value: '406', label: '期刊社' },
        { value: '407', label: '合作发展处' },
        { value: '408', label: '医疗健康服务中心' },
        { value: '409', label: '实验中心' },
        { value: '500', label: '校党委领导' },
        { value: '901', label: '上财后勤实业中心' },
        { value: '909', label: '博士后流动站' },
        { value: '-1', label: '外校教师' }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  },
  mounted: function() {
    this.loading = true
    const curTime = new Date()
    const param = {
      'pageSize': this.trainTestResult.pageSize,
      'pageNumber': this.trainTestResult.pageNumber,
      'active_name': this.t.active_name,
      'gender': this.t.gender,
      'department_code': this.t.department_code,
      'teacher_type_code': this.t.teacher_type_code,
      'username': this.name,
      'import_time': parseTime(curTime.toString())
    }
    getTrainResult(param.pageSize, param.pageNumber, param.active_name, param.gender, param.department_code, param.teacher_type_code,
      param.username, param.import_time).then(response => {
      this.trainTestResult.item = response.result
      this.trainTestResult.total = response.totalRows
      this.loading = false
    }).catch(error => {
      console.log(error)
      this.loading = false
      this.$message.error('获取培训成绩失败...')
    })
  },
  methods: {
    getFile() {
      this.file = event.target.files[0]
      this.beforeUpload(this.file)
      console.log(this.file)
    },
    submit: function(event) {
      event.preventDefault()
      this.uploadTip = '正在上传中...'
      this.processing = true
      const formData = new FormData()
      formData.append('file', this.file)
      axios.post('/api/teacherTrainTestResult/import', formData).then(response => {
        this.$message.success(response.data.message)
        this.refetchCurrentPage()
        this.uploadTip = '提交'
        this.processing = false
      }).catch(error => {
        console.log(error)
        this.$message.error('文件上传失败')
        this.uploadTip = '提交'
        this.processing = false
      })
    },
    handleSizeChange: function(val) {
      this.loading = true
      const curTime = new Date()
      const param = {
        'pageSize': val,
        'pageNumber': this.trainTestResult.pageNumber,
        'active_name': this.t.active_name,
        'gender': this.t.gender,
        'department_code': this.t.department_code,
        'teacher_type_code': this.t.teacher_type_code,
        'username': this.name,
        'import_time': parseTime(curTime.toString())
      }
      getTrainResult(param.pageSize, param.pageNumber, param.active_name, param.gender, param.department_code, param.teacher_type_code,
        param.username, param.import_time).then(response => {
        this.trainTestResult.item = response.result
        this.trainTestResult.total = response.totalRows
        this.loading = false
      }).catch(error => {
        console.log(error)
        this.loading = false
        this.$message.error('获取培训考试成绩失败')
      })
    },
    handleCurrentChange: function(val) {
      this.loading = true
      const curTime = new Date()
      this.currentPageNumber = val
      const param = {
        'pageSize': this.trainTestResult.pageSize,
        'pageNumber': val,
        'active_name': this.t.active_name,
        'gender': this.t.gender,
        'department_code': this.t.department_code,
        'teacher_type_code': this.t.teacher_type_code,
        'username': this.name,
        'import_time': parseTime(curTime.toString())
      }
      getTrainResult(param.pageSize, param.pageNumber, param.active_name, param.gender, param.department_code, param.teacher_type_code,
        param.username, param.import_time).then(response => {
        this.trainTestResult.item = response.result
        this.trainTestResult.total = response.totalRows
        this.trainTestResult.pageNumber = val
        this.trainTestResult.pageSize = param.pageSize
        this.loading = false
      }).catch(error => {
        console.log(error)
        this.loading = false
        this.$message.error('获取培训考试成绩失败')
      })
    },
    handleSelectionChange: function(val) {
      const that = this
      let ids = ''
      that.multipleSelection = []
      _.each(val, function(value, key) {
        that.multipleSelection.push(value.ID)
        ids += value.ID + ','
      })
      that.multipleSelectionIds = (ids.substring(ids.length - 1) === ',') ? ids.substring(0, ids.length - 1) : ids
    },
    search: function() {
      this.loading = true
      const curTime = new Date()
      const param = {
        'pageSize': 20,
        'pageNumber': 1,
        'active_name': this.t.active_name,
        'gender': this.t.gender,
        'department_code': this.t.department_code,
        'teacher_type_code': this.t.teacher_type_code,
        'username': this.name,
        'import_time': parseTime(curTime.toString())
      }
      this.currentPageNumber = 1
      getTrainResult(param.pageSize, param.pageNumber, param.active_name, param.gender, param.department_code, param.teacher_type_code,
        param.username, param.import_time).then(response => {
        const data = response.result
        this.trainTestResult.item = data
        this.trainTestResult.total = response.totalRows
        this.trainTestResult.pageNumber = 1
        this.trainTestResult.pageSize = 20
        _.each(data, function(value) {
          value.checked = false
        })
        this.loading = false
      }).catch(error => {
        this.loading = false
        console.log(error)
      })
    },
    importData: function() {
      this.dialogImportVisible = true
    },
    beforeUpload(file, fileList) {
    // 上传前配置
      const excelfileExtend = '.xls, .xlsx'// 设置文件格式
      console.log(file.path)
      const fileExtend = file.name.substring(file.name.lastIndexOf('.')).toLowerCase()
      if (excelfileExtend.indexOf(fileExtend) <= -1) {
        this.$message.error('文件格式错误')
        return false
      }
    },
    refetchCurrentPage: function() {
      this.loading = true
      const curTime = new Date()
      const param = {
        'pageSize': this.trainTestResult.pageSize,
        'pageNumber': this.currentPageNumber,
        'active_name': this.t.active_name,
        'gender': this.t.gender,
        'department_code': this.t.department_code,
        'teacher_type_code': this.t.teacher_type_code,
        'username': this.name,
        'import_time': parseTime(curTime.toString())
      }
      getTrainResult(param.pageSize, param.pageNumber, param.active_name, param.gender, param.department_code, param.teacher_type_code,
        param.username, param.import_time).then(response => {
        const data = response.result
        this.trainTestResult.item = data
        this.trainTestResult.total = response.totalRows
        _.each(data, function(value) {
          value.checked = false
        })
        this.loading = false
      }).catch(error => {
        this.loading = false
        console.log(error)
        this.$message.error('获取培训考试成绩失败')
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  #app {
        margin: 50px;
    }
  #searchConditions{
        border:1px solid;
        padding:10px;
    }
  table {
        font-size:12px;
        line-height:10px;
    }
  .upload {
        border:1px solid;
        margin:50px;
        padding:20px;
    }
</style>

<style rel="stylesheet/scss" lang="scss">
 a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}
</style>